
<template>
   <div class="content">
      <div class="cont1">
          <div class="header">订单详情</div>
          <div class="cont1_1">
             <span>订单状态：{{data.order.state}}</span>
            <span>收件人姓名：{{data.order.name}}</span>
            <span>收件人电话：{{data.order.phone}}</span>
            <span>收件地址：{{data.order.address}}</span>
            <span>订单编号：{{data.order.orderNum}}</span>
          </div>
      </div>
      <div class="cont2">
        <div class="header">商品详情</div>
        <div class="cont2_1">
          <img :src="data.goods.src" alt="">
        <div class="goods">
          <span>商品名称： {{data.goods.name}}</span>
          <span>规格： {{data.goods.size}}</span>
          <span>颜色： {{data.goods.color}}</span>
          <span>数量： {{data.goods.count}}</span>
          <span>单价： ￥{{data.goods.price}}</span>
          <span>积分： {{data.goods.jifen}}</span>
        </div>
      </div>
      </div>
      <div class="cont3" v-if=" data.order.state == '待发货'" >
        <div class="header">发货设置</div>
        <div class="form">
          <el-form :inline="true" :model="data.formInline" class="demo-form-inline">
            <el-form-item >
              <el-select v-model="data.formInline.value" placeholder="选择物流公司">
                <el-option
                    v-for="item in data.formInline.courier"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name"
                  />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="data.formInline.orderNum" placeholder="填写运单号"  />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="ensure" >确定发货</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div  v-if="data.order.state == '待收货'">
        <div class="header">物流信息</div>
            <div class="cont1_1">
              <span>物流单号: {{data.order.distr_num}}</span>
              <span>发货时间: {{data.order.distr_time}}</span>
              <span>物流公司: {{data.order.company}}</span>
            </div>
      </div>
  </div>
</template>
<script setup>
import { reactive,onMounted} from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { ElMessage } from "element-plus";
// import axios from 'axios';
import http from "../utils/request";
  // 生命周期，创建页面完成时渲染数据
  const route = useRoute()
  const router = useRouter()
   onMounted(()=>{
     
    data.order.orderNum = route.params.order_id
    data.order.name = route.params.user
    data. order.phone = route.params.phone
    data.order.address = route.params.address
    data.goods.name = route.params.goods_name
    data. goods.src = route.params.goods_imgs
    data.goods.size = route.params.goods_size
    data.goods.color = route.params.goods_size
    data.goods.count = route.params.goods_num
    data.goods.price = route.params.goods_price
    data.goods.jifen = route.params.order_jf
    data.order.distr_num = route.params.distr_num
    data.order.company = route.params.company
    data.order.distr_time = route.params.distr_time
    if(route.params.status==1){
      data.order.state = '待付款'
    }else if(route.params.status==2){
      data.order.state = '待发货'
    }else if(route.params.status==3){
      data.order.state = '待收货'
    }else{
        data.order.state = '已完成'
    }
   })
    const data = reactive({
      distr_time:'',
      order:{state:'',name:'张三',phone:'13408756789',address:'成都市 武侯区',orderNum:'987654356434'},
      goods:{src:'http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg',name:'张三',size:'规格一',color:'red',count: '1',price:'98',jifen:'1234'},
      formInline:{orderNum: '',value:'',status:'已发货', courier:[{id:1,name:'EMS'},{id:2,name:'顺丰快递'},{id:3,name:'京东'}]}
    })
    // 点击确认发货
    
    const ensure = ()=>{
      // 拿到表单数据
      let str = data.formInline.value.substring(0,2)
      if(str=="顺丰"){
        str = 'SF'
      }else if(str=="京东"){
        str = 'JD'
      }else{
        str = 'EMS'
      }
      let fhForm = {
          id:parseInt(route.params.id),
          company:data.formInline.value,
          distr_num:str + data.formInline.orderNum,
        }
        console.log(fhForm);
      // 向后台发起请求发货，修改订单状态
          http({
          url: "/fahuo",
          method: "post",
          data: 
          fhForm
          ,
        }).then((res) => {
          // console.log(res.data)
          if (res.data.code == 200) {
            data.formInline.value = ''
            data.formInline.orderNum = ''
            ElMessage({
              message: '发货成功',
              type: 'success',
            })
           router.push({
        path: '/home/orderManage'
    })
          }
        });

    // 请求成功以后清空表单

    }
</script>

<style scoped >

.content{
  background-color: white;
  /* padding: 0 2rem; */
  font-size: 1.2rem;
  box-sizing: border-box;
}
.header{
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #79bffd;
  color: white;
  padding: 0rem 1rem;
  box-sizing: border-box;
  /* background-color: rgb(220, 229, 230) ; */
}

.cont1{
  margin: 0;
  width: 100%;
}
.cont1_1{ 
  padding: 1rem 2rem;
  line-height: 2.5rem;
  background-color: rgb(251, 253, 252);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
  font-size: 0.8rem;
}
.cont2_1{
  background-color: rgb(251, 253, 252);
  display: flex;
  padding: 0.5rem;
  box-sizing: border-box;
}
img{ 
  width: 15rem;
  height: 15rem;
}
  .goods{
    display: flex;
    flex-direction: column;
    line-height: 2.3rem;
    padding-left: 2rem;
    padding-top: 1rem;
    font-size: 0.8rem;
    box-sizing: border-box;
  }
  .form {
    padding-top: 2rem;
    box-sizing: border-box;
    background-color: rgb(251, 253, 252);
    margin-bottom: 5rem;
  }
  .el-form {
    display: flex;
    justify-content: space-around;
  }
      
  .el-main{
      overflow: visible;
  }
</style>
